<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
      box-sizing: border-box;
    }
    .uploadBox {
      margin-top: 20px;
      width: 100%;
      min-height: 500px;
      border-radius: 3px;
      border: 1px solid #ddd;
      padding: 16px;
    }

    .uploadBox > ul {

    }

    .uploadBox > ul > li {
      display: inline-block;
    }

    .uploadimglist {
      width: 300px;
      height: 300px;
      border: 1px solid #c0ccda;
      border-radius: 6px;
      box-sizing: border-box;
      margin: 0 8px 8px 0;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }

    .uploadimglist > img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .uploadimglist .img-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
      text-align: center;
      line-height: 300px;
      display: none;
      z-index: 10;
    }

    .uploadimglist .progress {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      font-size: 26px;
      border-radius: 5px;
      text-align: center;
      line-height: 300px;
      z-index: 1000;
    }

    .uploadimglist .delete {
      font-size: 20px;
      color: #fff;
    }

    .uploadimglist .icon-reset-upload {
      font-size: 20px;
      color: #fff;
    }

    .reset-upload-box {
      display: inline-block;
      position: relative;
      width: 30px;
      height: 100%;
      line-height: 300px;
    }

    .reset-upload-box > input {
      width: 100%;
      height: 100%;
      border: none;
      z-index: 1;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }


    .uploadimglist .look {
      font-size: 20px;
      color: #fff;
    }

    .upload {
      width: 300px;
      height: 300px;
      display: inline-block;
      line-height: 300px;
      border-radius: 6px;
      border: 1px dashed #d9d9d9;
      position: relative;
      text-align: center;
      cursor: pointer;
    }

    .upload:hover {
      border-color: #409eff;
    }

    .upload .iconup {
      font-size: 28px;
      color: #8c939d
    }

    .upload .el-upload__input {
      width: 100%;
      height: 100%;
      border: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }

    .big-img-mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 100;
    }

    .big-img-mask .center-img-box {
      width: 50%;
      margin: 80px auto;
      background: #fff;
      padding: 10px;
      padding-top: 0;
      border-radius: 5px;
    }

    .big-img-mask .center-img-box img {
      width: 100%;
    }
  </style>
</head>
<body>
<div class="uploadBox ">
  <ul class="">
    <!--<li class="l">-->
    <!--<div class="uploadimglist">-->
    <!--<img src="blob:http://127.0.0.1:8080/394596c2-66ad-4b46-a5b2-59bffe92593b">-->
    <!--<div class="img-mask">-->
    <!--<i class="Hui-iconfont look">&#xe709;</i>-->
    <!--<i style="margin-left: 10px" class="Hui-iconfont delete">&#xe609;</i>-->
    <!--<span class="reset-upload-box">-->
    <!--<i class="Hui-iconfont icon-reset-upload">&#xe642;</i>-->
    <!--<input type="file" accept='image/*'>-->
    <!--</span>-->
    <!--</div>-->
    <!--<span class="progress"></span>-->
    <!--</div>-->
    <!--</li>-->
  </ul>
  <div class="upload">
    <i class="Hui-iconfont iconup">&#xe600;</i>
    <input type="file" name="file" multiple="multiple" accept='image/*' class="el-upload__input">
  </div>
  <div class="row cl">
    <span></span>
  </div>
</div>

<script src="../js/jquery.js"></script>

<script>
  // 获取七牛token； https://api.cloudcpc.com/home/Qiniu/upload
  var token = "9EgXyMq7XJdJ3AsfGyLjWqOGCx3NUfkIvXD3TY_J:04OVbQGQ86nyhekXFfOHsWq400w=:eyJzY29wZSI6IjcxY2xvdWQiLCJkZWFkbGluZSI6MTU0NTAzNjA3NH0=";
  // window.onload=function () {
  //   token = document.getElementById('token').value;
  // };
  var formData = new FormData();
  var imgurl = [];
  var imgTotal = 0;
  //拖拽上传
  var uploadBox = document.getElementsByClassName('upload')[0];
  uploadBox.ondrag = function () {
    e.preventDefault()
  };
  uploadBox.ondrop = function (e) {
    e.preventDefault();
    var files = e.dataTransfer.files;
    commonChooseFiles(files)
  };

  function commonChooseFiles(files) {
    var len = files.length;
    for (var i = 0; i < len; i++) {
      if (imgTotal > 8) {
        layer.msg('最多上传9张图片!', {icon: 1, time: 1000});
        break
      }
      imgTotal++;
      // console.log(imgTotal);
      //动态添加*******
      var li = document.createElement('li');
      var div = document.createElement('div');
      li.className = 'l';
      div.className = 'uploadimglist';
      var str = "<div class=\"img-mask\">\n" +
          "            <i class=\"Hui-iconfont look\">&#xe709;</i>\n" +
          "            <i style=\"margin-left: 10px\" class=\"Hui-iconfont delete\">&#xe609;</i>\n" +
          "            <span class=\"reset-upload-box\">\n" +
          "              <i class=\"Hui-iconfont icon-reset-upload\">&#xe642;</i>\n" +
          "              <input type=\"file\" accept='image/*'>\n" +
          "            </span>\n" +
          "          </div>" + "<span class=\"progress\"></span>";
      div.innerHTML = str;
      li.appendChild(div);
      $('.uploadBox>ul').append(li);
      //***************************************
      var type = 'all';
      uploadImage(files[i], imgTotal - 1, type);
    }
  }

  // 上传图片
  $('.el-upload__input').change(function (e) {
    commonChooseFiles(this.files)
  });

  function uploadImage(file, index, type) {
    var formdata = new FormData();
    formdata.append('token', token);
    formdata.append('file', file);
    $.ajax({
      type: 'post',
      url: 'https://upload.qiniup.com',
      data: formdata,
      processData: false,// 告诉jQuery不要去处理发送的数据
      contentType: false,// 告诉jQuery不要去设置Content-Type请求头
      xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
          xhr.upload.addEventListener("progress", function (evt) {
            var loaded = evt.loaded;     //已经上传大小情况
            var tot = evt.total;      //附件总大小
            var per = Math.floor(100 * loaded / tot);  //已经上传的百分比
            $(".progress").eq(index).show().text(per + '%');
            if (per == 100) {
              $('.progress').eq(index).hide()
            }
          }, false);
          return xhr;
        }
      },
      success: function (res) {
        var url = 'http://oss.co-links.com/' + res.key;
        console.log(url);
        if (type === 'all') {
          var img = document.createElement("img");
          img.setAttribute("src", url);
          $('.uploadBox > ul > li').eq(index).find('.uploadimglist').append(img);
          imgurl[index] = url;
          if (imgurl.length > 8) {
            $('.upload').hide();
          }
        } else if (type === 'one') {
          $('.uploadBox > ul > li').eq(index).find('img').attr('src', url)
          imgurl[index] = url;
        }
      },
      error: function (error) {
        console.log(error);
        layer.msg('expired token', {icon: 1, time: 1000});
      }
    })
  }

  //建立一個可存取到該file的url //本地预览------ //
  // function getObjectURL(file) {
  //   var url = null;
  //   // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
  //   if (window.createObjectURL != undefined) { // basic
  //     url = window.createObjectURL(file);
  //   } else if (window.URL != undefined) { // mozilla(firefox)
  //     url = window.URL.createObjectURL(file);
  //   } else if (window.webkitURL != undefined) { // webkit or chrome
  //     url = window.webkitURL.createObjectURL(file);
  //   }
  //   // console.log(url);
  //   return url;
  // }

  $(function () {
    var index = 0;
    $('.uploadBox').on('mouseenter', 'li', function () {
      index = $(this).index();
      $(this).find('.img-mask').stop().fadeIn()
    });
    $('.uploadBox').on('mouseleave', 'li', function () {
      index = $(this).index();
      $(this).find('.img-mask').stop().fadeOut()
    });
    $('.uploadBox').on('click', '.delete', function () {
      imgurl.splice(index, 1);
      imgTotal--;
      $('.uploadBox > ul > li').eq(index).remove();
      if (imgurl.length <= 8) {
        $('.upload').show();
      }
    });
    $('.uploadBox').on('click', '.look', function () {
      var imgurl = $('.uploadBox > ul > li').eq(index).find('img').attr('src');
      console.log(imgurl);
      $('.big-img-mask').fadeIn().find('img').attr('src', imgurl);
    });
    //这个是单独上传某一张图片
    $(document).on('change', 'input', function () {
      if (this !== $('.el-upload__input')[0]) {
        var type = 'one';
        uploadImage(this.files[0], index, type);
      }
    });
  });

  function imgPrewColse() {
    $('.big-img-mask').fadeOut();
  }
</script>
</body>
</html>